<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>老师页面</title>

<!--    <link rel="stylesheet" href="static/css/normalize.css">-->
<!--    <link rel="stylesheet" href="static/bootstrap-3.3.7-dist/css/bootstrap.css">-->
<!--    <script src="static/js/jquery-3.1.1.min.js"></script>-->
<!--    <script src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>-->

    <link rel="stylesheet" href="static/css/normalize.css">
    <link rel="stylesheet" href="static/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="static/js/jquery-3.1.1.min.js"></script>
    <script src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    <script type="text/javascript">

        // {"code":100,"msg":"处理成功！","extend":{"pageInfo":
        // {"pageNum":1,"pageSize":5,"size":5,"startRow":1,"endRow":5,"total":32,
        // "pages":7,"list":[{"sno":"19124001","password":"123","sname":"徐尔诺","sex":"男",
        // "classno":198,"remark":"优秀","grade":"大三"},
        // {"sno":"19124002","password":"123","sname":"徐尔诺","sex":"男","classno":198,
        //  "remark":"优秀","grade":"大三"},{"sno":"19124003","password":"123","sname":"徐尔诺",
        //  "sex":"男","classno":198,"remark":"优秀","grade":"大三"},
        //  {"sno":"19124004","password":"123","sname":"徐尔诺","sex":"男","classno":198,
        //  "remark":"优秀","grade":"大三"},{"sno":"19124005","password":"123","sname":"徐尔诺","sex":"男",
        //  "classno":198,"remark":"优秀","grade":"大三"}],"prePage":0,"nextPage":2,"isFirstPage":true,"isLastPage":false,"hasPreviousPage":false,"hasNextPage":true,"navigatePages":5,"navigatepageNums":[1,2,3,4,5],"navigateFirstPage":1,"navigateLastPage":5,"firstPage":1,"lastPage":5}}}

        var totalRecord,currentPage;
        //1、页面加载完成以后，直接去发送ajax请求,要到分页数据
        $(function(){
            //去首页
            to_page(1);
        });

        // 表格的总信息函数
        function to_page(pn){
            $.ajax({
                url:"teaToClassStu",
                data:"pn="+pn,
                type:"GET",
                success:function(result){
                    //console.log(result);
                    //1、解析并显示学生数据
                    build_emps_table(result);
                    //2、解析并显示分页信息
                    build_page_info(result);
                    //3、解析显示分页条数据
                    build_page_nav(result);
                }
            });
        }

        var checkBoxTd;
        var Sno;
        var Sname;
        var Sex;
        var ClassNo;
        var Remark;
        var Grage;
        // 1、解析并显示学生数据
        function build_emps_table(result){
            //清空table表格
            $("#stu_table tbody").empty();
            var emps = result.extend.pageInfo.list;
            $.each(emps,function(index,item){
                 checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>");
                 Sno = $("<td></td>").append(item.sno);
                 Sname = $("<td></td>").append(item.sname);
                 Sex = $("<td></td>").append(item.sex);
                 ClassNo = $("<td></td>").append(item.classno);
                 Remark = $("<td></td>").append(item.remark);
                 Grage = $("<td></td>").append(item.grade);
                /**
                 <button class="">
                 <span class="" aria-hidden="true"></span>
                 编辑
                 </button>
                 */
                var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
                //为编辑按钮添加一个自定义的属性，来表示当前学生id
                editBtn.attr("edit-id",item.empId);
                var delBtn =  $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
                //为删除按钮添加一个自定义的属性来表示当前删除的员工id
                delBtn.attr("del-id",item.empId);
                var btnTd = $("<td></td>").append(editBtn);

                //append方法执行完成以后还是返回原来的元素
                $("<tr></tr>").append(checkBoxTd)
                    .append(Sno)
                    .append(Sname)
                    .append(Sex)
                    .append(ClassNo)
                    .append(Remark)
                    .append(Grage)
                    .append(btnTd)
                    .appendTo("#stu_table tbody");
            });
        }


        //解析显示分页信息
        function build_page_info(result){
            $("#page_info_area").empty();
            $("#page_info_area").append("当前"+result.extend.pageInfo.pageNum+"页,总"+
                result.extend.pageInfo.pages+"页,总"+
                result.extend.pageInfo.total+"条记录");
            totalRecord = result.extend.pageInfo.total;
            currentPage = result.extend.pageInfo.pageNum;
        }

        //解析显示分页条，点击分页要能去下一页....
        function build_page_nav(result) {
            //page_nav_area
            $("#page_nav_area").empty();
            var ul = $("<ul></ul>").addClass("pagination");

            //构建元素
            var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
            var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
            if (result.extend.pageInfo.hasPreviousPage == false) {
                firstPageLi.addClass("disabled");
                prePageLi.addClass("disabled");
            } else {
                //为元素添加点击翻页的事件
                firstPageLi.click(function () {
                    to_page(1);
                });
                prePageLi.click(function () {
                    to_page(result.extend.pageInfo.pageNum - 1);
                });
            }


        var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
        var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
        if(result.extend.pageInfo.hasNextPage == false){
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        }else{
            nextPageLi.click(function(){
                to_page(result.extend.pageInfo.pageNum +1);
            });
            lastPageLi.click(function(){
                to_page(result.extend.pageInfo.pages);
            });
        }

        //添加首页和前一页 的提示
        ul.append(firstPageLi).append(prePageLi);
        //1,2，3遍历给ul中添加页码提示
        $.each(result.extend.pageInfo.navigatepageNums,function(index,item){

            var numLi = $("<li></li>").append($("<a></a>").append(item));
            if(result.extend.pageInfo.pageNum == item){
                numLi.addClass("active");
            }
            numLi.click(function(){
                to_page(item);
            });
            ul.append(numLi);
        });
        //添加下一页和末页 的提示
        ul.append(nextPageLi).append(lastPageLi);

        //把ul加入到nav
        var navEle = $("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
    }

        //清空表单样式及内容
        function reset_form(ele){
            $(ele)[0].reset();
            //清空表单样式
            $(ele).find("*").removeClass("has-error has-success");
            $(ele).find(".help-block").text("");
        }

        //点击新增按钮弹出模态框。
        $("#emp_add_modal_btn").click(function(){
            //清除表单数据（表单完整重置（表单的数据，表单的样式））
            reset_form("#empAddModal form");
            //s$("")[0].reset();
            //发送ajax请求，查出部门信息，显示在下拉列表中
            getDepts("#empAddModal select");
            //弹出模态框
            $("#empAddModal").modal({
                backdrop:"static"
            });
        });


        // 编辑按钮得class--btn
        //学生编辑按钮
        $(document).on("click",".btn",function(){
            //1、弹出是否修改对话框
            $("#stuUpdateModal").modal({
                backdrop:"static"
            });
            //2. 给弹话框赋值
            $("#sno_update_static").text(Sno);
            $("#sname_update_input").text(Sname);
            $("#remark_update_input").text(Remark);
            $("#grade_update_input").text(Grage);
        });







    </script>

</head>
<body>

<!-- 搭建显示页面 -->
<div class="container">
    <!-- 标题 -->
    <div class="row">
        <div class="col-md-12">
            <h1>学生信息</h1>
        </div>
    </div>

    <!-- 显示表格数据 -->
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover" id="stu_table">
                <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="check_all"/>
                    </th>
                    <th>学号:</th>
                    <th>姓名:</th>
                    <th>性别:</th>
                    <th>班级:</th>
                    <th>评价:</th>
                    <th>年级:</th>
                </tr>
                </thead>
                <tbody >

                </tbody>
            </table>
        </div>
    </div>

    <!-- 显示分页信息 -->
    <div class="row">
        <!--分页文字信息  -->
        <div class="col-md-6" id="page_info_area"></div>
        <!-- 分页条信息 -->
        <div class="col-md-6" id="page_nav_area"></div>
    </div>

</div>


<!-- 员工修改的模态框 -->
<div class="modal fade" id="stuUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">学生修改</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">学号</label>
                        <div class="col-sm-10">
                            <p class="form-control-static" id="sno_update_static"></p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <span class="help-block" id="sname_update_input"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">评价</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="text" name="remark" class="form-control" id="remark_update_input" placeholder="优秀、良好等等...">
                            </label>

                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">年级</label>
                        <div class="col-sm-4">

                            <span class="help-block" id="grade_update_input"></span>

                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_update_btn">更新</button>
            </div>
        </div>
    </div>
</div>



</body>
</html>